<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
		<a4j:loadScript src="resource://jquery.js"></a4j:loadScript>
		<a4j:form id="PaymentOrderForm" styleClass="trn_form">
			<a4j:outputPanel id="msgContainer" ajaxRendered="true">
				<h:messages globalOnly="false" errorClass="msgError" styleClass="message" infoClass="msgInfo" />
			</a4j:outputPanel>
			<a4j:outputPanel id="PaymentOrderHeadPanel">
				<div id="PaymentOrderHead">
				<div class="form_table">
					<div class="form_row">
						<div class="form_fields">
							<s:label for="payOrderHeadSupplier">Proveedor:</s:label>
							<h:selectOneMenu
								styleClass="input"
								converter="#{supplierConverter}"
								value="#{trnPaymentOrder.paymentOrderHead.supplierData}"
								id="payOrderHeadSupplier" >
								<a4j:support event="onchange" reRender="payOrderHeadVoucherPanel" />
								<rich:ajaxValidator 
                    			event="onblur" 
                    			onsubmit="validateSelectField(
                    				fieldObject = this, 
                    				fieldMsgId = 'payOrderHeadSupplierMsg', 
                    				required = 'true', 
                    				requiredMsg = 'Favor seleccione el proveedor')">
           						</rich:ajaxValidator>
								<s:selectItems 
									value="#{withinHolder.supplierList()}" 
									var="supp"
									label="#{convertAssist.getSupplierName(supp.id)}"
									noSelectionLabel="Proveedor">
								</s:selectItems>
								<s:convertEntity></s:convertEntity>
							</h:selectOneMenu>	
							<div id="payOrderHeadSupplierMsg" class="inactiveMsg"></div>
						</div>
						<div class="form_fields">
							<s:label for="searchStartDate">Fecha Ini Busqueda:</s:label>
							<rich:calendar 
								inputClass="input"
								id="searchStartDate"
								value="#{trnPaymentOrder.paymentOrderHead.searchStartDate}" 
								datePattern="dd/MM/yy"
								buttonClass="field_btn">
								<a4j:support event="onchange"></a4j:support>
							</rich:calendar>
							<div id="searchStartDateMsg" class="inactiveMsg"></div>	
						</div>
						<div class="form_fields">
							<s:label for="searchEndDate">Fecha Fin Busqueda:</s:label>
							<rich:calendar 
								inputClass="input"
								id="searchEndDate"
								value="#{trnPaymentOrder.paymentOrderHead.searchEndDate}" 
								datePattern="dd/MM/yy"
								buttonClass="field_btn">
								<a4j:support event="onchange"></a4j:support>
							</rich:calendar>
							<div id="searchEndDateMsg" class="inactiveMsg"></div>	
						</div>
					</div>
					<div class="form_row">	
						<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form" style="margin-left:3px; margin-top:7px; width:234px;">
							<a4j:commandButton 
								action="#{trnPaymentOrder.retrieveVouchersForLoad()}"
								id="payOrderSearchVouchersBtn"
								value="Buscar"
								reRender="payOrderLoadVouchersBtn"
								styleClass="button"
								style="position:relative; padding-bottom:4px;"
								onclick="onRequestStart();"
								oncomplete="onRequestEnd();"/>
								<rich:spacer width="20px" />
							<a4j:commandButton 
								id="payOrderLoadVouchersBtn" 
								value="Comprobantes"
								onclick="#{rich:component('paymentOrderDetListModalPanel')}.show()"
								styleClass="button"
								disabled="#{empty trnPaymentOrder.paymentOrderDetForLoad}"
								style="FONT-FAMILY: 'Century Schoolbook L'; position:relative; padding-bottom:4px;"/>
						</s:decorate>
					</div>
					<div class="form_row">	
						<div class="form_fields">
							<s:label for="payOrderHeadCurrency">Moneda:</s:label>
							<h:selectOneMenu
								styleClass="input"
								converter="#{currencyConverter}"
								value="#{trnPaymentOrder.paymentOrderHead.currencyData}"
								id="payOrderHeadCurrency">
								<a4j:support event="onchange"
									actionListener="#{trnPaymentOrder.retrieveChangeType()}"
									reRender="payOrderHeadChangeTypePanel"
									ajaxSingle="true" />
								<rich:ajaxValidator 
                    			event="onblur" 
                    			onsubmit="validateSelectField(
                    				fieldObject = this, 
                    				fieldMsgId = 'payOrderHeadCurrencyMsg', 
                    				required = 'true', 
                    				requiredMsg = 'Favor seleccione la moneda')">
           						</rich:ajaxValidator>
								<s:selectItems 
									value="#{withinHolder.currencyList()}" 
									var="cur"
									label="#{cur.descrip}" 
									noSelectionLabel="Seleccione la Moneda">
								</s:selectItems>
							</h:selectOneMenu>
							<div id="payOrderHeadCurrencyMsg" class="inactiveMsg"></div>
						</div>
						<a4j:outputPanel id="payOrderHeadChangeTypePanel">
							<div class="form_fields">
								<s:label for="payOrderHeadChangeType">Tipo de Cambio:</s:label>
								<h:inputText
									styleClass="input"
									value="#{trnPaymentOrder.paymentOrderHead.changeType}"
									id="payOrderHeadChangeType" 
									size="10" 
									disabled="true">
									<a4j:support event="onchange" />
									<a4j:support event="onblur"></a4j:support>
								</h:inputText>
								<div id="payOrderHeadChangeTypeMsg" class="inactiveMsg"></div>
							</div>
						</a4j:outputPanel>
					</div>
					<div class="form_row">
						<div class="form_fields">
							<s:label for="payOrderHeadVoucherDate">Fecha Emision:</s:label>
							<rich:calendar 
								inputClass="input"
								id="payOrderHeadVoucherDate"
								value="#{trnPaymentOrder.paymentOrderHead.voucherDate}" 
								datePattern="dd/M/yyyy hh:mm:a"
								buttonClass="field_btn">
								<a4j:support event="onchange"></a4j:support>
							</rich:calendar>
							<div id="payOrderHeadVoucherDateMsg" class="inactiveMsg"></div>	
						</div>	
					</div>
								
				</div>
			</div>
			</a4j:outputPanel>

			<a4j:region id="PaymentOrderDetForm">
				<a4j:outputPanel id="PayOrderDetGridPanel">	
				<rich:datascroller align="center" for="PayOrderDetGrid"
						maxPages="15" page="#{trnPaymentOrder.scrollerPage}"
						renderIfSinglePage="false" />			   			
				<div style="clear: both;" />
				<rich:panel styleClass="table_add" style="margin-top:10px;" rendered="true">
					<rich:dataTable id="PayOrderDetGrid" value="#{trnPaymentOrder.allPaymentOrderDet}" var="row">
						<rich:column rendered="#{not empty trnPaymentOrder.allPaymentOrderDet}">
							<f:facet name="header"><h:outputText value="Fecha Comprobante" /></f:facet>
							<h:outputText value="#{row.voucherDate}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allPaymentOrderDet}">
							<f:facet name="header"><h:outputText value="Nro. Comprobante" /></f:facet>
							<h:outputText value="#{comAssist.getInvoiceNumber(row.establishment, row.expedition, row.voucher, row.instalments)}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allPaymentOrderDet}">
							<f:facet name="header"><h:outputText value="Total Comprobante" /></f:facet>
							<h:outputText value="#{row.residuePaymentOrden}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allPaymentOrderDet}">
							<f:facet name="header"><h:outputText value="Total Pago" /></f:facet>
							<h:outputText value="#{row.amountOfPaymentOrden}" />
						</rich:column>
					</rich:dataTable>
				</rich:panel>
					<div class="total_values">
						<div class="total_values_fields">
							<s:label for="payOrderHeadTotal" style="float:left; float:left; margin-right:10px; top:3px;">
								<h:outputText value="Total"/>
							</s:label>
							<h:inputText value="#{trnPaymentOrder.paymentOrderHead.totalPaymentOrder}"
								id="payOrderHeadTotal" required="false" size="10"
								disabled="true">
							<a4j:support event="onchange"></a4j:support>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="payOrderHeadTotal" />
							</div>
						</div>
					</div>
				</a4j:outputPanel>
			</a4j:region>
			
			<a4j:outputPanel id="PaymentOrderMethodOfPaymentPanel">
				<div class="form_table">
					<div class="form_row">
						<div class="form_fields">
							<s:label for="payOrderBankAccount">Cuenta Bancaria:</s:label>
								<h:selectOneMenu
									styleClass="input"
									converter="#{bankAccountsConverter}"
									value="#{trnPaymentOrder.methodOfPaymentData.bankAccountsData}"
									id="payOrderBankAccount" >
									<a4j:support event="onchange" />
									<rich:ajaxValidator 
	                    			event="onblur" 
	                    			onsubmit="validateSelectField(
	                    				fieldObject = this, 
	                    				fieldMsgId = 'payOrderBankAccountMsg', 
	                    				required = 'true', 
	                    				requiredMsg = 'Favor seleccione la cuenta bancaria')">
	           						</rich:ajaxValidator>
									<s:selectItems 
										value="#{withinHolder.bankAccountsList()}" 
										var="bankAccount"
										label="#{comAssist.getConcatBankAccount(bankAccount.ref, bankAccount.accountNumber)}"
										noSelectionLabel="Cuenta Bancaria">
									</s:selectItems>
									<s:convertEntity></s:convertEntity>
								</h:selectOneMenu>	
							<div id="payOrderBankAccountMsg" class="inactiveMsg"></div>
						</div>
						<div class="form_fields">
							<s:label for="payOrderNumValue">Numero de Cheque:</s:label>
							<h:inputText
								styleClass="input"
								value="#{trnPaymentOrder.methodOfPaymentData.numValue}"
								id="payOrderNumValue" 
								size="10" >
								<a4j:support event="onchange"></a4j:support>
									<rich:ajaxValidator 
	                    			event="onblur" 
	                    			onsubmit="validateStringField(
	                    				fieldObject = this, 
	                    				fieldMsgId = 'payOrderNumValueMsg', 
	                    				required = 'true', 
	                    				requiredMsg = 'Favor ingrese el Nro. de Cheque', 
	                    				chekForLength = 'false', 
	                    				min = 0, 
	                    				max = 0)">
	           						</rich:ajaxValidator>
							</h:inputText>
							<div id="payOrderNumValueMsg" class="inactiveMsg"></div>
						</div>
					</div>
				</div>
				<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form" style="margin-left:3px; margin-top:7px; width:100px;">
					<a4j:commandButton 
						id="payOrderLoadMethodOfPayment" 
						action="#{trnPaymentOrder.loadGridMethodOfPayment}"
						value="Agregar" 
						reRender="PaymentOrderMethodOfPaymentGridPanel, PaymentOrderMethodOfPaymentGrid" 
						disabled="#{not empty trnPaymentOrder.allMethodOfPayment}"
						styleClass="button"
						style="FONT-FAMILY: 'Century Schoolbook L'; position:relative; padding-bottom:4px;"
						onclick="onRequestStart();"
						oncomplete="onRequestEnd();"/>
				</s:decorate>
			</a4j:outputPanel>
			
			<a4j:region id="PaymentOrderMethodOfPaymentForm">
				<a4j:outputPanel id="PaymentOrderMethodOfPaymentGridPanel">	
				<rich:datascroller align="center" for="PaymentOrderMethodOfPaymentGrid"
						maxPages="15" page="#{trnPaymentOrder.scrollerPage}"
						renderIfSinglePage="false" />			   			
				<div style="clear: both;" />
				<rich:panel styleClass="table_add" style="margin-top:10px;" rendered="true">
					<rich:dataTable id="PaymentOrderMethodOfPaymentGrid" value="#{trnPaymentOrder.allMethodOfPayment}" var="row">
						<rich:column rendered="#{not empty trnPaymentOrder.allMethodOfPayment}">
							<f:facet name="header"><h:outputText value="Nro. Cuenta" /></f:facet>
							<h:outputText value="#{row.bankAccountsData.accountNumber}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allMethodOfPayment}">
							<f:facet name="header"><h:outputText value="Banco" /></f:facet>
							<h:outputText value="#{row.bankAccountsData.ref}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allMethodOfPayment}">
							<f:facet name="header"><h:outputText value="Nro. Cheque" /></f:facet>
							<h:outputText value="#{row.numValue}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allMethodOfPayment}">
							<f:facet name="header"><h:outputText value="Beneficiario" /></f:facet>
							<h:outputText value="#{row.payee}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPaymentOrder.allMethodOfPayment}">
							<f:facet name="header"><h:outputText value="Monto" /></f:facet>
							<h:outputText value="#{row.amount}" />
						</rich:column>
					</rich:dataTable>
				</rich:panel>
					<div class="total_values">
						<div class="total_values_fields">
							<s:label for="payOrderMethodOfPaymentTotal" style="float:left; float:left; margin-right:10px; top:3px;">
								<h:outputText value="Total"/>
							</s:label>
							<h:inputText value="#{trnPaymentOrder.paymentOrderHead.totalMethodOfPayment}"
								id="payOrderMethodOfPaymentTotal" required="false" size="10"
								disabled="true">
							<a4j:support event="onchange"></a4j:support>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="payOrderMethodOfPaymentTotal" />
							</div>
						</div>
					</div>
				</a4j:outputPanel>
			</a4j:region>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form" style="width:270px;">
				<a4j:commandButton value="Guardar" id="payOrderSaveRegBtn"
					action="#{trnPaymentOrder.saveNewData()}"
					reRender="PaymentOrderForm"
					styleClass="button"/>
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="payOrderCancelBtn"
					onclick="#{rich:component('payOrderConfirmationModalPanel')}.show()"
					styleClass="button" />
			</s:decorate>
		</a4j:form>
		
		<rich:modalPanel  id="payOrderConfirmationModalPanel"
			resizeable="false" autosized="true" moveable="false" >
			<a4j:form>
			<div class="globalMessage">
				<h:outputText value="Esta seguro que desea cancelar la operacion?" />
			</div>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="trn_button_form" style="width:270px;">
				<a4j:commandButton value="Aceptar" id="payOrderAcceptConfirmation"
					action="#{trnPaymentOrder.cancelData()}"
					reRender="PaymentOrderForm"
					oncomplete="#{rich:component('payOrderConfirmationModalPanel')}.hide()"
					styleClass="button"/>
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="payOrderCancelConfirmation"
					onclick="#{rich:component('payOrderConfirmationModalPanel')}.hide()"
					styleClass="button" />
			</s:decorate>
			</a4j:form>
		</rich:modalPanel>
		
		<rich:modalPanel
			id="paymentOrderDetListModalPanel"
			width="1024"
			height="400"
			resizeable="false">
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="Proveedor" />
				</h:panelGroup>
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/img/close.png" style="cursor:pointer"
						id="paymentOrderDetListModalPanelHide">
					</h:graphicImage>
					<rich:componentControl for="paymentOrderDetListModalPanel"
						attachTo="paymentOrderDetListModalPanelHide" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<h:panelGroup id="paymentOrderDetListModalPanelEdit">
			<!--  **** Include of the update page ****  -->
				<a4j:include viewId="/fms/com/transactions/comPaymentOrderDetList.xhtml" />
			</h:panelGroup>
		</rich:modalPanel>

</ui:composition>
